<template>
  <div class="app-container">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
      <el-form-item label="推送标题" prop="messageTitle">
        <el-input v-model="formData.messageTitle" placeholder="请输入推送标题" clearable>
        </el-input>
      </el-form-item>
      <el-form-item label="消息摘要" prop="messageDesc">
        <el-input v-model="formData.messageDesc" placeholder="请输入消息摘要" clearable>
        </el-input>
      </el-form-item>

      <el-divider />

      <el-form-item label="发送对象" prop="messageSendCondition">
        <el-radio-group v-model="formData.messageSendCondition" size="medium">
          <el-radio v-for="(item, index) in messageSendConditionOptions" :key="index" :label="item.value">{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>

      <span v-if="formData.messageSendCondition === 1">
        <el-form-item label="区域筛选" prop="operation">
        <el-select
          v-model="formData.operation"
          placeholder="请选择区域筛选"
          clearable
          multiple>
          <el-option
            v-for="item in operationOptions"
            :key="item.adminUserId"
            :label="item.operationName"
            :value="item.adminUserId">
          </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="行业筛选" prop="industry">
          <el-select
            v-model="formData.industry"
            placeholder="请选择行业筛选"
            clearable
            multiple>
            <el-option
              v-for="item in industryOptions"
              :key="item.cateId"
              :label="item.cateName"
              :value="item.cateId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发送范围" prop="sendType">
          <el-radio-group v-model="formData.sendType" size="medium">
            <el-radio v-for="(item, index) in sendTypeOptions" :key="index" :label="item.value">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </span>
      <span v-else>
        <el-form-item label="指定类型" prop="radioOption">
          <el-radio-group v-model="formData.radioOption" size="medium">
            <el-radio v-for="(item, index) in radioOptionOptions" :key="index" :label="item.value">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <span v-if="formData.radioOption === 1">
          <el-form-item label="指定商户" prop="specShop">
          <el-select
            v-model="formData.specShop"
            laceholder="请选择指定商户"
            clearable
            filterable
            remote
            reserve-keyword
            :remote-method="getShopList"
            @change="getShopManager">
            <el-option
              v-for="item in shopOptions"
              :key="item.shopId"
              :label="item.shopName"
              :value="item.shopId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择员工" prop="user">
          <el-select
            v-model="formData.user"
            placeholder="请选择选择员工"
            clearable
            filterable
            multiple>
            <el-option
              v-for="item in shopManagerOptions"
              :key="item.userId"
              :label="item.username"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        </span>
         <el-form-item v-else label="指定用户" prop="sepcUser">
          <el-select
            v-model="formData.sepcUser"
            placeholder="请选择指定用户"
            clearable
            filterable
            remote
            reserve-keyword
            :remote-method="getUserList">
            <el-option
              v-for="item in sepcUserOptions"
              :key="item.userId"
              :label="item.username"
              :value="item.userId"></el-option>
          </el-select>
        </el-form-item>
      </span>

      <el-divider />

      <el-form-item label="站内消息分类" prop="messageCate">
        <el-radio-group v-model="formData.messageCate" size="medium">
          <el-radio v-for="(item, index) in messageCateOptions" :key="index" :label="item.value">{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否推送" prop="messageIsPush">
        <el-switch v-model="formData.messageIsPush" :active-value='1' :inactive-value='0'></el-switch>
      </el-form-item>
      <span v-if="formData.messageIsPush === 1">
        <el-form-item label="通知跳转类型" prop="messageType">
          <el-radio-group v-model="formData.messageType" size="medium">
            <el-radio v-for="(item, index) in messageTypeOptions" :key="index" :label="item.value">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="跳转对应值" prop="messageTypeValue">
          <el-input v-model="formData.messageTypeValue" placeholder="请输入跳转对应值" clearable />
        </el-form-item>
      </span>
      <el-form-item label="消息时间" prop="messageDate">
        <el-date-picker type="datetime" v-model="formData.messageDate" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择消息时间" clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item label="消息图片" prop="messageImgUrl">
        <el-upload
          name="file"
          drag
          accept="image/*"
          :limit="1"
          :action="upload.uploadToOss"
          :headers="upload.uploadHeaders"
          :onError="uploadError"
          :onSuccess="uploadSuccess">
          <img v-if="formData.messageImgUrl" :src="formData.messageImgUrl" :width="200" />
          <i v-else class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </el-form-item>
      <el-form-item label="消息内容" prop="messageContent">
        <el-input v-model="formData.messageContent" type="textarea" placeholder="请输入消息内容" show-word-limit
                  :autosize="{minRows: 4, maxRows: 4}"></el-input>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import { getOperationList, getIndustryList, getShopList, getShopManager, addDefine } from '@/api/app/messageDefine'
import { listUser } from '@/api/app/user'

export default {
  components: {},
  props: [],
  data() {
    return {
      operationOptions: [],
      industryOptions: [],
      shopOptions: [],
      shopManagerOptions: [],
      sepcUserOptions: [],
      upload: {
        uploadToOss: process.env.VUE_APP_BASE_API + "/common/uploadToOss",
        uploadHeaders: {
          Authorization: "Bearer " + getToken()
        }
      },
      formData: {
        messageTitle: undefined,
        messageDesc: undefined,
        messageSendCondition: 1,
        operation: [],
        industry: [],
        sendType: 1,
        radioOption: 1,
        specShop: undefined,
        user: [],
        sepcUser: undefined,
        messageCate: 2,
        messageIsPush: 0,
        messageType: 1,
        messageTypeValue: undefined,
        messageDate: undefined,
        messageImgUrl: null,
        messageContent: '',
      },
      rules: {
        messageTitle: [{
          required: true,
          message: '请输入推送标题',
          trigger: 'blur'
        }],
        messageDesc: [{
          required: true,
          message: '请输入消息摘要',
          trigger: 'blur'
        }],
        messageSendCondition: [],
        operation: [{
          required: true,
          message: '请选择区域筛选',
          trigger: 'change'
        }],
        industry: [{
          required: true,
          message: '请选择行业筛选',
          trigger: 'change'
        }],
        sendType: [],
        radioOption: [],
        specShop: [{
          required: true,
          message: '请选择指定商户',
          trigger: 'change'
        }],
        user: [{
          required: true,
          message: '请选择选择员工',
          trigger: 'change'
        }],
        sepcUser: [{
          required: true,
          message: '请选择指定用户',
          trigger: 'change'
        }],
        messageCate: [],
        messageType: [],
        messageTypeValue: [{
          required: true,
          message: '请输入通知跳转对应值',
          trigger: 'blur'
        }],
        messageDate: [{
          required: true,
          message: '请选择消息时间',
          trigger: 'change'
        }],
        messageContent: [{
          required: true,
          message: '请输入消息内容',
          trigger: 'blur'
        }],
      },
      messageImgUrlAction: 'https://jsonplaceholder.typicode.com/posts/',
      messageImgUrlfileList: [],
      messageSendConditionOptions: [{
        "label": "筛选",
        "value": 1
      }, {
        "label": "指定",
        "value": 2
      }],
      sendTypeOptions: [{
        "label": "全部",
        "value": 1
      }, {
        "label": "商家管理员",
        "value": 2
      }],
      radioOptionOptions: [{
        "label": "指定商户",
        "value": 1
      }, {
        "label": "指定用户",
        "value": 2
      }],
      messageCateOptions: [{
        "label": "系统消息",
        "value": 2
      }, {
        "label": "业务消息",
        "value": 3
      }],
      messageTypeOptions: [{
        "label": "URL跳转",
        "value": 1
      }, {
        "label": "内部页跳转",
        "value": 2
      }],
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getOperationList()
    this.getIndustryList()
  },
  mounted() {},
  methods: {
    getOperationList() {
      getOperationList().then(response => {
        this.operationOptions = response.data
      })
    },
    getIndustryList() {
      getIndustryList().then(response => {
        this.industryOptions = response.data
      })
    },
    getShopList(query) {
      if (query !== '') {
        setTimeout(() => {
          getShopList(query).then(response => {
            this.shopOptions = response.data
          })
        }, 200)
      }
    },
    getShopManager() {
      if (this.formData.specShop !== undefined) {
        getShopManager(this.formData.specShop).then(response => {
          this.shopManagerOptions = response.data
        })
      }
    },
    getUserList(query) {
      if (query !== '') {
        listUser({username: query, pageNum: 1, pageSize: 10}).then(response => {
          this.sepcUserOptions = response.rows
        })
      }
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (valid) {
          addDefine(this.formData).then(response => {
            this.msgSuccess("新增成功");
            this.close();
          })
        }
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    uploadSuccess (response, file, fileList) {
      this.formData.messageImgUrl = response.data
    },
    uploadError (response, file, fileList) {
      this.$message.error('上传图片失败！')
    },
    /** 关闭按钮 */
    close() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({ path: "/app/message"})
    }
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}

</style>
